<template>
    <div class="pages" v-if="isLoad">
        <div class="tab" @click="showPickera = true">
            <template v-if="this.yearIndex != -1">
                {{ this.quarterIndex != -1 ? this.yearList[this.yearIndex].year + "年第" + this.quarter[this.quarterIndex].quarter + "季度" : this.yearList[this.yearIndex].year + "年" }}
            </template>
            <template v-else> 请选择年度/季度 </template>
            <img src="../../assets/img/down.png" />
        </div>
        <div class="rule" @click="showRule = true">排名规则</div>
        <div class="topthree" v-if="listdata.length > 0">
            <div
                :class="['titem', { second: index == 0 }, { first: index == 1 }, { third: index == 2 }]"
                v-for="(item, index) in listdata"
                :key="item.userId"
                v-if="index < 3"
                @click="pageJump('/userinfo', item.userId)"
            >
                <img src="../../assets/img/icon40.png" alt="" class="icon" v-if="index == 0" />
                <img src="../../assets/img/icon39.png" alt="" class="icon" v-if="index == 1" />
                <img src="../../assets/img/icon31.png" alt="" class="icon" v-if="index == 2" />
                <img :src="item.avatar ? item.avatar : require('../../assets/img/tx.png')" alt="" class="tx" />
                <p>{{ item.name }}</p>
                <div class="num">
                    <span>{{ item.score }}</span
                    >分
                </div>
            </div>
        </div>
        <div class="rank">
						<div class="ritem me" v-if="UserRankList" @click="pageJump('/userinfo', UserRankList.userId, UserRankList.sort)">
								<div class="num"><img :src="UserRankList.avatar ? UserRankList.avatar : require('../../assets/img/tx.png')" alt="" class="tx" />{{ UserRankList.sort }}</div>
								<p>{{ UserRankList.username }}（我）</p>
								<div class="score">
										<span>{{ UserRankList.score }}</span
										>分
								</div>
						</div>
						<template v-if="listdata.length">
							<div class="ritem" v-for="(item, index) in listdata" :key="item.userId" v-if="index > 2" @click="pageJump('/userinfo', item.userId)">
									<div class="num">{{ index * 1 + 1 }}</div>
									<img :src="item.avatar ? item.avatar : require('../../assets/img/tx.png')" alt="" class="tx" />
									<p>
											<span>{{ item.name }}</span
											><i>投稿次数：{{ item.draftCount }}次</i>
									</p>
									<div class="score">
											<span>{{ item.score }}</span
											>分
									</div>
							</div>
						</template>						
						<div class="noData" v-else>暂无数据</div>
        </div>
        <!-- <div class="noData" v-else>暂无数据</div> -->
        <!-- 弹窗 - 注册认证 -->
        <div class="pop" v-if="showRule">
            <div class="popbg" @click="showRule = false"></div>
            <div class="mid">
                <div class="info">
                    <h3>排名规则</h3>
                    <div class="gztxt" v-html="listKing.content"></div>
                </div>
                <img class="close" @click="showRule = false" src="../../assets/img/icon20.png" alt="" />
            </div>
        </div>
        <!-- 弹窗 - 注册认证 -->
        <!-- 选择年度季度 -->
        <van-popup v-model="showPickera" round position="bottom">
            <div class="van-picker__toolbar">
                <button type="button" class="van-picker__cancel" @click="showPickera = false">取消</button>
                <button type="button" class="van-picker__confirm" @click="onConfirma">确认</button>
            </div>
            <div class="van-picker-column">
                <div class="findWrap">
                    <div class="tabType">
                        <span v-for="(item, index) in tablist" :key="index" :class="[{ on: tabflag == index }]" @click="changeTab(index)">
                            {{ item }}
                        </span>
                    </div>
                </div>
                <div class="h">
                    <!-- 年度 -->
                    <div class="choseList" v-if="isShow">
                        <div v-for="(i, index) in yearList" :key="index" :class="[{ on: yearIndex == index }]" @click="choseYear(index)">{{ i.year }}</div>
                    </div>
                    <!-- 季度 -->
                    <div class="choseList" v-else>
                        <div v-for="(i, index) in quarter" :key="index" :class="[{ on: quarterIndex == index }]" @click="choseQuarter(index)">第{{ i.quarter }}季度</div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script>
import { ranking } from "@/https/api";
import { Toast } from "vant";
export default {
    name: "",
    data() {
        return {
            yearList: [], // 年度列表
            quarter: [], // 季度列表
            showPickera: false, // 选择年时间弹窗

            isLoad: false,
            listdata: [],
            UserRankList: "",
            listKing: [],
            showRule: false,
            tablist: ["年度", "季度"],
            tabflag: 0,
            yearIndex: -1,
            isShow: true, //是否显示年度
            quarterIndex: -1,
        };
    },
    created() {},
    mounted() {
        this.getYear();
        this.getList();
    },
    methods: {
        // 获取时间筛选年
        async getYear() {
            const res = await ranking.getRankScreenYear();
            if (res.code == 1) {
                this.yearList = res.data.data;
								// .reverse()
            }
        },
        // 获取时间筛选季度
        async getRankScreenQuarter() {
            const res = await ranking.getRankScreenQuarter({
                year: this.yearList[this.yearIndex].year,
            });
            if (res.code == 1) {
                this.quarter = res.data.data;
            }
        },
        //获取榜单列表和排名规则
        async getList() {
            let data = { 
                type: this.tabflag + 1,
                year: this.yearList.length > 0 ? this.yearList[this.yearIndex].year : "",
                quarter: this.quarter.length > 0 ? this.quarter[this.quarterIndex].quarter : "",
            };
            const res = await ranking.rankingList(data);
            if (res.code == 1) {
                this.listdata = res.data.ranklist || [];
                this.UserRankList = res.data.UserRank;
                this.listKing = res.data.rankrule;
                this.isLoad = true;
            }
        },
        // 选择年
        choseYear(index) {
            this.yearIndex = index;
        },
        // 切换季度
        changeTab(index) {
            if (index == 0) {
                this.getYear();
                this.isShow = true;
								this.quarterIndex = -1;
            } else {
                if (this.yearIndex >= 0) {
                    this.getRankScreenQuarter();
                    this.isShow = false;
                } else {
                    Toast("请先选择年");
                    return false
                }
            }
            this.tabflag = index;
        },
        // 选择季度
        choseQuarter(index) {
            this.quarterIndex = index;
        },
        // 确认
        onConfirma() {
            this.showPickera = false;
            this.getList();
        },
        pageJump(url, ids, sorts) {
            this.$router.push({
                path: url,
                query: { id: ids, sort: sorts },
            });
        },
    },
};
</script>
<style scoped>
.mid {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 3;
}
.mid .info {
    display: block;
    width: 5.38rem;
    height: 7.74rem;
    background: url(../../assets/img/icon74.png) center bottom / 5.38rem 7.74rem no-repeat;
    padding: 2.4rem 0.3rem 0;
}
.mid .info h3 {
    font-size: 0.32rem;
    color: #ef6d29;
    line-height: 0.44rem;
    margin-bottom: 0.3rem;
    text-align: center;
}
.mid .gztxt {
    font-size: 0.26rem;
    color: #333;
    line-height: 0.44rem;
    height: 4rem;
    overflow-y: auto;
}
.mid .close {
    display: block;
    width: 0.88rem;
    height: 0.88rem;
    margin: 0.8rem auto 0;
}

.rank {
    background-color: #fff;
    padding: 0.3rem 0.3rem;
}
.ritem {
    border-bottom: 0.02rem solid #dbdbdb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0;
}
.ritem:last-child {
    border-bottom: none;
}
.ritem .num {
    font-size: 0.32rem;
    color: #ef6d29;
    width: 1.14rem;
    text-align: center;
}
.ritem .tx {
    display: block;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
}
.ritem p {
    margin: 0 0.18rem;
    line-height: 0.4rem;
    flex: 1;
}
.ritem p span {
    display: block;
    font-size: 0.28rem;
    color: #333;
}
.ritem p i {
    display: block;
    font-size: 0.24rem;
    color: #999;
    margin-top: 0.06rem;
}
.ritem .score {
    width: 1.6rem;
    text-align: center;
    font-size: 0.22rem;
    color: #ef6d29;
}
.ritem .score span {
    font-size: 0.32rem;
}
.ritem.me {
    background-color: #f27533;
    border-radius: 0.2rem;
    height: 1.32rem;
    border: none;
}
.ritem.me .score {
    color: #fff;
}
.ritem.me p {
    color: #fff;
    font-size: 0.28rem;
}
.ritem.me .tx {
    position: relative;
    top: -0.3rem;
    margin: 0 auto -0.16rem;
    width: 0.96rem;
    height: 0.96rem;
}
.ritem.me .num {
    color: #fff;
    width: 1.86rem;
}

.pages {
    background: url(../../assets/img/icon2.png) center top / 100% auto no-repeat;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
}
.tab {
    font-size: 0.3rem;
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab img {
    width: 0.22rem;
    height: 0.12rem;
    margin-left: 0.1rem;
}
.rule {
    position: absolute;
    right: 0.3rem;
    top: 0.4rem;
    line-height: 0.6rem;
    font-size: 0.28rem;
    color: #fff;
    text-decoration: underline;
    z-index: 2;
}
.topthree {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0.64rem 0.2rem;
    position: relative;
}
.topthree:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.02rem;
    width: 100%;
    height: 0.22rem;
    border-radius: 0.2rem 0.2rem 0 0;
    z-index: 2;
    background-color: #fff;
}
.titem {
    width: 2.54rem;
}
.titem.second {
    order: 2;
}
.titem .icon {
    height: 0.24rem;
    margin: 0 auto 0.06rem;
}
.titem .tx {
    display: block;
    width: 1.02rem;
    height: 1.02rem;
    border-radius: 50%;
    overflow: hidden;
    border: 0.04rem solid #fff;
    margin: 0 auto;
    margin-bottom: 0.16rem;
}
.titem p {
    font-size: 0.26rem;
    color: #fff;
    line-height: 0.48rem;
    height: 0.48rem;
    margin-bottom: 0.1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
}
.titem .num {
    height: 1rem;
    line-height: 1rem;
    background-color: #ffddcb;
    font-size: 0.22rem;
    color: #ef6319;
    text-align: center;
    border-radius: 0.2rem 0.2rem 0 0;
}
.titem .num span {
    font-size: 0.42rem;
}
.titem.third {
    order: 3;
    width: 1.84rem;
}
.titem.third .num {
    background-color: #ffa575;
    height: 0.6rem;
    line-height: 0.6rem;
}
.titem.third .num span {
    font-size: 0.3rem;
}
.titem.first {
    width: 1.84rem;
    order: 1;
}
.titem.first .icon {
    height: 0.22rem;
}
.titem.first .tx {
    width: 0.9rem;
    height: 0.9rem;
}
.titem.first p {
    line-height: 0.4rem;
    height: 0.4rem;
    margin-bottom: 0.1rem;
}
.titem.first .num {
    height: 0.7rem;
    line-height: 0.7rem;
    background-color: #ffc1a1;
}
.titem.first .num span {
    font-size: 0.32rem;
}
.findWrap {
    margin: 0.4rem 0;
}
.tabType {
    display: flex;
    align-items: center;
    padding: 0 0.3rem;
    border-bottom: 1px solid #dbdbdb;
}
.tabType span {
    font-size: 0.3rem;
    color: #999;
    padding: 0 0.25rem 0.25rem;
    position: relative;
}
.tabType span::after {
    content: "";
    width: 0.3rem;
    height: 0.06rem;
    background: transparent;
    border-radius: 0.03rem;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.tabType span.on {
    color: #333;
}
.tabType span.on::after {
    content: "";
    background: #ef6d29;
}
.choseList {
    max-height: 5rem;
    overflow-y: auto;
}
.choseList div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.28rem;
    color: #333333;
    width: 100%;
    height: 0.6rem;
    padding: 0 0.3rem;
    margin: 0.2rem 0;
    box-sizing: border-box;
}
.choseList div.on {
    color: #f27533;
}
.choseList div.on::after {
    content: "";
    width: 0.3rem;
    height: 0.26rem;
    background: url(../../assets/img/choseOn.png) no-repeat;
    background-size: 100% 100%;
}
.noData {
    font-size: 0.3rem;
    color: #333;
    text-align: center;
    padding: .6rem 0 0;
}
</style>
